<template>
  <div class="feedback">
    <div class="head">
      <span class="active">
        技术反馈
      </span>
    </div>
    <div class="content">
      <baidu-map
        class="bm-view"
        :center="{ lng: 116.313481, lat: 39.983223 }"
        :zoom="20"
        ak="tZT2SxRwIIig1eO8z0IgZaYfArwRdunb"
        :scroll-wheel-zoom="true"
      >
        <!-- :mapStyle="mapStyle" -->

        <bm-marker
          :position="{ lng: 116.313481, lat: 39.983223 }"
          :icon="{ url: iconPng, size: { width: 37, height: 55 } }"
        >
          <!-- <bm-label
            content="北京中研硕福科技有限公司"
            :labelStyle="{
              color: '#ff3a56',
              fontSize: '14px',
              border: 'none',
              background: 'rgba(255,255,255,.9)',
              padding: '4px',
            }"
          /> -->
        </bm-marker>
      </baidu-map>
      <div class="info">
        <p class="title">北京中研硕福科技有限公司</p>
        <div class="flex-p">
          <p>
            <span class="t1">联系人：</span>
            <br />
            <span class="t2">商务总监-石一萍</span>
          </p>
          <p>
            <span class="t1">联系方式：</span>
            <br />
            <span class="t2">1151-0110-6969</span>
          </p>
        </div>
        <div class="flex-p">
          <p>
            <span class="t1">联系人：</span>
            <br />
            <span class="t2">市场经理-王彤筱</span>
          </p>
          <p>
            <span class="t1">联系方式：</span>
            <br />
            <span class="t2">159-3442-2260</span>
          </p>
        </div>

        <p class="email">
          <span class="t1">邮箱：</span>
          <br />
          <span class="t2">zysfsyp_1001@163.com</span>
        </p>
        <p class="address">
          <span class="t1">地址：</span>
          <br />
          <span class="t2">北京市海淀区苏州街18号院4号长远天地大厦A2座912</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import iconPng from "@img/system/icon-location.png";
export default {
  data() {
    return {
      iconPng,
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.feedback {
  width: 100%;
  height: 100%;
  background: #fff;
}
.head {
  padding-left: 20px;
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #446db3;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(4, 0, 0, 0.1);
  text-align: left;
  span {
    margin-right: 75px;
    display: inline-block;
    height: 80px;
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    cursor: default;
  }
  span.active {
    font-weight: bold;
    color: #446db3;
    border-bottom: 4px solid #446db3;
  }
}
.content {
  height: calc(100% - 80px);
  padding: 50px;
  display: flex;
  .bm-view {
    flex: 0 0 52%;
    background: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
  }
  .info {
    flex: 0 0 48%;
    padding: 60px 0 0 50px;
    text-align: left;
    background: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
    .title {
      font-size: 34px;
      color: #333333;
      margin-top: 20px;
    }
    p {
      flex: 0 0 50%;
      margin-bottom: 48px;
      span.t1 {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }
      span.t2 {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
      }
    }
    .flex-p {
      display: flex;
      justify-content: space-between;
    }
  }
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .content .info .title {
    font-size: 30px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .content {
    padding: 30px;
    .info {
      padding: 30px 0 0 30px;
      .title {
        font-size: 26px;
      }
      p {
        margin-bottom: 36px;
      }
      p span.t1 {
        font-size: 18px;
      }
      p span.t2 {
        font-size: 16px;
      }
    }
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .content .info {
    .title {
      font-size: 20px;
    }
    p {
      margin-bottom: 36px;
      span.t1 {
        font-size: 16px;
      }
      span.t2 {
        font-size: 14px;
      }
    }
  }
}
</style>
